<template>
	<view class="content">
		<view :style="{paddingTop:info.statusBarHeight+'rpx'}" class="home-head">
			<picker @change="changeCity" ref="pickerCity" mode="region" :value="region">
				<view class="coordinate">
					<text :style="{fontSize:info.cityFontSize+'rpx'}">{{info.city}}</text>
					<img class="xiala" src="../../../static/img/img/xiala.png" alt="">
				</view>
			</picker>
			<view class="search-box">
				<uv-input @confirm="search" v-model="info.form.searchWord" style="font-size: 24rpx;"
					placeholder="搜索俱乐部、赛事、活动" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #2C2C2C"></uv-input>
			</view>
		</view>
		<!-- 选择类型 -->
		<view class="select-type flex-align-center" @click="openPicker">
			<text>{{info.currentType.label}}</text>
			<img class="xiala1" src="../../../static/img/img/xiala1.png" alt="">
		</view>
		<!-- 俱乐部列表 -->
		<scroll-view :style="{height:info.clientHeight+'px'}" id="scrollT" :scroll-top="scrollTop" scroll-y="true"
			class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">

			<view v-for="(item ,index) in info.list" :key="index">
				<clubItem v-if="item.gameId" :item="item"></clubItem>
				<view v-else class="club-list">
					<view class="club-item flex-align-center">
						<view class="bg-box">
							<img class="club-img" :src="item.background" alt="">
							<img class="club-logo" :src="item.logo" alt="">
						</view>

						<view class="club-info flex-center-a">
							<text class="title">{{item.enterpriseName}}</text>
							<view class="flex-align-center">
								<img class="dinwei" src="../../../static/img/img/dinwei.png" alt="">
								<text class="zuobiao">{{item.enterpriseAddress}}</text>
							</view>
							<view class="flex-justify-s">
								<text class="zuobiao">
									<text v-for="(ite,idx) in item.enterpriseShowSiteWXResponse"
										:key="idx">{{idx>0?'、':''}}{{ite.siteType.value}}</text>
								</text>
								<navigator :url="`/pages/club/club?id=${item.enterpriseId}`" hover-class="none"
									class="join-btn flex-center">加入我们
									<uv-icon name="arrow-right" size="8" color="#ffffff"></uv-icon>
								</navigator>
							</view>
						</view>

					</view>

				</view>

			</view>
			<view class="no-data">
				<uv-load-more fontSize="12" v-if="info.isComplete" status="nomore" />
			</view>

		</scroll-view>
		<!-- 最新消息 -->
		<newMessage v-if="info.orderInfo" :item="info.orderInfo"></newMessage>
		<OAuth @showTab="showTab"></OAuth>
		<tabBar v-if="info.isShow" :selectedIndex="0"></tabBar>
		<uv-picker ref="picker" :columns="info.columns" keyName="label" @confirm="confirm"></uv-picker>

	</view>
</template>

<script setup>
	import {
		Login,
		echoShowList,
		specialBookInfo
	} from "../../../requestApi/api.js";
	import {
		ref,
		getCurrentInstance,
		computed,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		useStatusBarStore,
		getCityName
	} from "@/store/index";
	import {
		setScrollHeight
	} from '@/utils/uitls.js';
	import OAuth from "@/compoments/OAuth/OAuth.vue";
	import clubItem from "@/compoments/discover/clubItem.vue";
	import newMessage from "@/compoments/newMessage/newMessage.vue";
	import QQMapWX from "@/utils/qqmap-wx-jssdk.js";
	var qqmapsdk = new QQMapWX({
		key: 'EG3BZ-6WXW4-EO2UZ-XD6UM-NAD4S-UJFRH' // 必填
	});

	// import { onLogin } from '@/requestApi/login/index.js'

	const instance = getCurrentInstance(); //获取当前实例
	const statusBar = useStatusBarStore();

	const info = ref({
		statusBarHeight: 0,
		clientHeight: 0,
		isShow: false,
		columns: [
			[{
				'value': 1,
				'label': '全部类型'
			}, {
				'value': 2,
				'label': '俱乐部'
			}, {
				'value': 3,
				'label': '赛事'
			}]
		],
		currentType: {
			'value': 1,
			'label': '全部类型'
		},
		form: {
			"address": "", //定位地
			"current": 1, //页码
			"searchWord": "", //搜索词
			"size": 10, //每页大小
			"type": 1 //类型 1：全部类型 2：俱乐部 3：赛事
		},
		isLoading: false,
		isComplete: false,
		list: [],
		region: ['广东省', '广州市', '海珠区'],
		city: '',
		cityFontSize: 28,
		orderInfo: null,
	})
	const picker = ref(null);
	onLoad(() => {
		uni.getSetting({
			success: (res) => {
				// console.log(res.authSetting, res.authSetting['scope.userFuzzyLocation'])
				if (!res.authSetting['scope.userFuzzyLocation']) {
					uni.authorize({
						scope: 'scope.userFuzzyLocation',
						success() {
							getCity();

						}
					})
				} else {
					getCity();

				}
			}
		})

	})
	onShow(() => {
		info.value.statusBarHeight = statusBar.getStatusBarHeight();
		setScrollHeight('#scrollT', instance).then(res => {
			info.value.clientHeight = res;
		});

		let city=uni.getStorageSync('city');
		if (info.value.city && city!=info.value.city && uni.getStorageSync('token')) {
			info.value.city=city;
			info.value.form.current = 1;
			info.value.list = [];
			info.value.isComplete = false;
			getList();
		}

	})
	//获取是否有订单消息
	const getOrderMess = () => {
		specialBookInfo().then(res => {
			info.value.orderInfo = res.data;
		})
	};

	//获取城市
	const getCity = () => {
		uni.getFuzzyLocation({
			type: 'wgs84',
			success: function(res) {
				// console.log(res);
				//逆地址解析  坐标转地址信息
				qqmapsdk.reverseGeocoder({
					//Object格式
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success: function(result) { //成功后的回调
						const mapdata = result.result.ad_info;
						// city.getAddress(mapdata.district);
						info.value.city = mapdata.district;
						// console.log(result)
						uni.setStorageSync('city', info.value.city)
						getList();
						setFontSize()
					},
					fail: function(error) {
						console.error('888', error);
					},
					complete: function(res) {
						//console.log(res);
					}
				});

			},
			fail: (err) => {
				console.log(err)
			}
		});

	}
	//设置字体大小
	const setFontSize = () => {
		if (info.value.city.length > 3) {
			info.value.cityFontSize = 22;
		} else {
			info.value.cityFontSize = 28;
		}
	};

	//选择城市
	const changeCity = (e) => {
		info.value.city = e.detail.value[2];
		info.value.list = [];
		info.value.form.current = 1;
		info.value.isComplete = false;
		getList();
		setFontSize();
		uni.setStorageSync('city', info.value.city)

	};
	//搜索
	const search = () => {
		info.value.form.current = 1;
		getList();
	};
	//获取列表
	const getList = () => {
		info.value.isLoading = true;
		info.value.form.address = info.value.city;
		echoShowList(info.value.form).then(res => {
			info.value.isLoading = false;
			info.value.list = info.value.list.concat(res.data.records);
			info.value.form.current++;
			info.value.isComplete = !res.data.records.length;
		})
	};

	// 打开筛选
	const openPicker = () => {
		picker.value.open();
	};
	// 确认筛选
	const confirm = (e) => {
		if (e.value[0].value != info.value.currentType.value) {
			info.value.currentType = e.value[0];
			info.value.form.type = e.value[0].value;
			info.value.list = [];
			info.value.form.current = 1;
			info.value.isComplete = false;
			getList();
		}
	}

	//触底
	function lower() {
		!info.value.isLoading && !info.value.isComplete && getList();
		// console.log('到底啦')
	}
	// 是否显示自定义tabbar
	function showTab(e) {
		info.value.isShow = e;
		if (!e) {
			getOrderMess();
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";
	$uni-padding: 0 29rpx;

	.home-head {
		width: 100vw;
		background-color: #3D66F6;
		height: 250rpx;
		padding: 0 30rpx;
		display: flex;
		margin-bottom: 20rpx;


		.coordinate {
			color: #FFFFFF;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			height: 84rpx;
			margin-right: 8rpx;


			text {
				width: 86rpx;
				overflow: hidden;
				text-overflow: ellipsis; //文本溢出显示省略号
				white-space: nowrap; //文本不会换行
			}

			.xiala {
				width: 44rpx;
				height: 44rpx;

			}
		}

		.search-box {
			height: 84rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 14rpx 22rpx rgba(0, 0, 0, 0.02);
			border-radius: 8rpx;
			width: 55%;
			display: flex;
			align-items: center;

		}

	}

	.select-type {
		padding: 0 70rpx;
		font-size: 28rpx;
		color: #2C2C2C;
		margin-bottom: 26rpx;

		.xiala1 {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.club-list {
		padding: 0 46rpx 10rpx;


		.club-item {
			border-top: 2rpx solid rgba(165, 165, 165, 0.1);
			padding-top: 26rpx;
			margin-bottom: 26rpx;

			.bg-box {
				position: relative;

				.club-img {
					width: 240rpx;
					height: 180rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}

				.club-logo {
					position: absolute;
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-50%);
					right: 8rpx
				}
			}


			.club-info {
				height: 180rpx;
				flex: 1;

				.title {
					font-size: 30rpx;
					color: #2C2C2C;
				}

				.dinwei {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}

				.zuobiao {
					font-size: 24rpx;
					color: #A5A5A5;
				}

				.join-btn {
					width: 120rpx;
					height: 40rpx;
					background: #3dc39c;
					border-radius: 20rpx;
					font-size: 22rpx;
					color: #FFFFFF;

					text {
						margin-left: 10rpx;
					}
				}
			}


		}
	}


	.search-box ::v-deep .uv-input {
		border: none;

	}

	::v-deep .uv-input__content__field-wrapper__field {
		font-size: 24rpx !important;
	}
</style>